<template>
	<nt-container bg-color="#F7F7F7" v-model="scrollHeight">
		<view class="achievement">
			<view class="achievement-sum">
				<image src="/static/image/achievement.png" mode="aspectFill"></image>
				<view class="date" @tap="show = true">{{ formatParamTime(commonForm.searchValue.month, commonForm.timeConf.month) || '日期选择' }}</view>
				<view class="statistics" v-if="commonForm.countList.length >0">
					<view class="statistics-count">
						<view class="text">{{ commonForm.countList[0].name }}</view>
						<view class="value">{{ commonForm.countList[0].value }}</view>
					</view>
					<view class="statistics-list">
						<view class="statistics-item">
							<view class="text">{{ commonForm.countList[1].name }}</view>
							<view class="value">{{ commonForm.countList[1].value }}</view>
						</view>
						<view class="statistics-item">
							<view class="text">{{ commonForm.countList[2].name }}</view>
							<view class="value">{{ commonForm.countList[2].value }}</view>
						</view>
						<view class="statistics-item">
							<view class="text">{{ commonForm.countList[3].name }}</view>
							<view class="value">{{ commonForm.countList[3].value }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="achievement-table" :style="{height: tableHeight}">
				<nt-table
					:columns="commonForm.columns" 
					:table-data="commonForm.tableData"
					v-model="commonForm.loading"
					:finished="commonForm.finished"
					@scrolltolower="getCommonFormList"
					@refresherrefresh="formInit"
				></nt-table>
			</view>
		</view>
		<u-datetime-picker
			:show="show"
			v-model="commonForm.searchValue.month"
			:mode="commonForm.timeConf.month"
			title="日期选择"
			@close="show = false" 
			@cancel="show = false" 
			@confirm="confirmDate"
			closeOnClickOverlay
		></u-datetime-picker>
	</nt-container>
</template>

<script>
import dayjs from "dayjs"
import FormMixins from "@/mixins/formMixins"
export default {
	mixins: [FormMixins],
	data(){
		return {
			commonFormFuntype: "UserProfit",
			scrollHeight: 0,
			show: false,
			date: "",
		}
	},
	computed: {
		tableHeight(){
			return (this.scrollHeight - 230) + 'px'
		}
	},
	onLoad(options){
		this.formInit()
	},
	methods: {
		confirmDate(e){
			this.commonForm.searchValue.month = e.value
			this.show = false
		}
	}
}
</script>

<style scoped lang="scss">
.achievement{
	padding: 20rpx;
	box-sizing: border-box;
	&-sum{
		height: 330rpx;
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 35rpx;
		image{
			position: absolute;
			right: 0;
			top: 0;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}
		.date{
			min-width: 140rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background:#fff;
			border-radius: 100rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: var(--theme-color);
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			text-align: center;
			font-size: 24rpx;
			z-index: 6
		}
		.statistics{
			position: absolute;
			right: 0;
			left: 0;
			bottom: 0;
			padding: 40rpx;
			box-sizing: border-box;
			&-count{
				font-weight: bold;
				color:#fff;
				margin-bottom: 20rpx;
				.text{
					font-size: 30rpx;
					margin-bottom: 5rpx;
				}
				.value{
					font-size: 50rpx;
				}
			}
			&-list{
				display:flex;
				align-items: center;
				justify-content: space-between;
			}
			&-item{
				color:#fff;
				font-weight: bold;
				font-size: 30rpx;
				text-align: center;
				.text{
					margin-bottom: 10rpx;
				}
				.value{
				}
			}
			
		}
	}
}
</style>